<template>
  <el-tag
    :type="tagType"
    :size="size"
    :effect="effect"
    :closable="closable"
    :disable-transitions="disableTransitions"
    :hit="hit"
    :color="customColor"
    :class="tagClass"
    @close="handleClose"
    @click="handleClick"
  >
    <el-icon v-if="icon" class="wms-status-tag__icon">
      <component :is="icon" />
    </el-icon>
    <span class="wms-status-tag__text">{{ displayText }}</span>
  </el-tag>
</template>

<script setup lang="ts">
import { computed } from "vue";

/**
 * 状态配置接口
 */
interface StatusConfig {
  /** 显示文本 */
  text: string;
  /** 标签类型 */
  type: "primary" | "success" | "info" | "warning" | "danger";
  /** 图标 */
  icon?: string;
  /** 自定义颜色 */
  color?: string;
  /** 描述信息 */
  description?: string;
}

/**
 * 状态字典类型
 */
type StatusDictionary = Record<string | number, StatusConfig>;

/**
 * WMS状态标签组件属性接口
 */
interface WmsStatusTagProps {
  /** 状态值 */
  value: string | number | null | undefined;
  /** 字典类型或自定义状态配置 */
  type?: string | StatusDictionary;
  /** 标签尺寸 */
  size?: "large" | "default" | "small";
  /** 标签效果 */
  effect?: "dark" | "light" | "plain";
  /** 是否可关闭 */
  closable?: boolean;
  /** 是否禁用渐变动画 */
  disableTransitions?: boolean;
  /** 是否有边框描边 */
  hit?: boolean;
  /** 自定义颜色 */
  color?: string;
  /** 自定义图标 */
  icon?: string;
  /** 自定义文本 */
  text?: string;
  /** 未知状态时的显示文本 */
  unknownText?: string;
  /** 额外的CSS类名 */
  className?: string;
}

/**
 * WMS状态标签组件事件接口
 */
interface WmsStatusTagEmits {
  /** 关闭事件 */
  close: [];
  /** 点击事件 */
  click: [event: MouseEvent];
}

// 组件属性定义
const props = withDefaults(defineProps<WmsStatusTagProps>(), {
  size: "default",
  effect: "light",
  closable: false,
  disableTransitions: false,
  hit: false,
  unknownText: "未知",
});

// 组件事件定义
const emit = defineEmits<WmsStatusTagEmits>();

// 预定义的状态字典
const STATUS_DICTIONARIES: Record<string, StatusDictionary> = {
  // 通用状态
  common: {
    0: { text: "禁用", type: "danger", icon: "CircleClose" },
    1: { text: "启用", type: "success", icon: "CircleCheck" },
  },

  // 订单状态
  orderStatus: {
    0: { text: "待审核", type: "warning", icon: "Clock" },
    1: { text: "已审核", type: "primary", icon: "Check" },
    2: { text: "执行中", type: "info", icon: "Loading" },
    3: { text: "已完成", type: "success", icon: "CircleCheck" },
    4: { text: "已取消", type: "danger", icon: "CircleClose" },
  },

  // 库存状态
  inventoryStatus: {
    0: { text: "正常", type: "success", icon: "Check" },
    1: { text: "预警", type: "warning", icon: "Warning" },
    2: { text: "缺货", type: "danger", icon: "CircleClose" },
    3: { text: "超量", type: "info", icon: "ArrowUp" },
  },

  // 商品状态
  itemStatus: {
    0: { text: "停用", type: "danger", icon: "CircleClose" },
    1: { text: "正常", type: "success", icon: "CircleCheck" },
    2: { text: "维护", type: "warning", icon: "Tools" },
  },

  // 仓库状态
  warehouseStatus: {
    0: { text: "停用", type: "danger", icon: "CircleClose" },
    1: { text: "正常", type: "success", icon: "CircleCheck" },
    2: { text: "维护", type: "warning", icon: "Tools" },
  },

  // 审批状态
  approvalStatus: {
    0: { text: "待提交", type: "info", icon: "Edit" },
    1: { text: "审核中", type: "warning", icon: "Clock" },
    2: { text: "已通过", type: "success", icon: "CircleCheck" },
    3: { text: "已拒绝", type: "danger", icon: "CircleClose" },
    4: { text: "已撤回", type: "info", icon: "RefreshLeft" },
  },

  // 业务类型
  businessType: {
    purchase: { text: "采购入库", type: "primary", icon: "ShoppingCart" },
    sale: { text: "销售出库", type: "success", icon: "Sell" },
    transfer: { text: "调拨", type: "warning", icon: "Switch" },
    check: { text: "盘点", type: "info", icon: "List" },
    adjust: { text: "调整", type: "primary", icon: "EditPen" },
  },

  // 紧急程度
  urgencyLevel: {
    1: { text: "低", type: "info", icon: "ArrowDown" },
    2: { text: "中", type: "warning", icon: "Minus" },
    3: { text: "高", type: "danger", icon: "ArrowUp" },
    4: { text: "紧急", type: "danger", icon: "Warning", color: "#ff4d4f" },
  },
};

// 获取状态配置
const statusConfig = computed((): StatusConfig | null => {
  if (props.value === null || props.value === undefined) {
    return null;
  }

  // 如果type是对象，直接使用
  if (typeof props.type === "object") {
    return props.type[props.value] || null;
  }

  // 如果type是字符串，从预定义字典中查找
  if (typeof props.type === "string" && STATUS_DICTIONARIES[props.type]) {
    return STATUS_DICTIONARIES[props.type][props.value] || null;
  }

  return null;
});

// 显示文本
const displayText = computed((): string => {
  if (props.text) {
    return props.text;
  }

  if (statusConfig.value) {
    return statusConfig.value.text;
  }

  if (props.value !== null && props.value !== undefined) {
    return String(props.value);
  }

  return props.unknownText;
});

// 标签类型
const tagType = computed(() => {
  if (statusConfig.value) {
    return statusConfig.value.type;
  }
  return "info";
});

// 图标
const icon = computed(() => {
  if (props.icon) {
    return props.icon;
  }

  if (statusConfig.value?.icon) {
    return statusConfig.value.icon;
  }

  return undefined;
});

// 自定义颜色
const customColor = computed(() => {
  if (props.color) {
    return props.color;
  }

  if (statusConfig.value?.color) {
    return statusConfig.value.color;
  }

  return undefined;
});

// 标签样式类
const tagClass = computed(() => {
  let className = "wms-status-tag";

  if (props.className) {
    className += ` ${props.className}`;
  }

  if (icon.value) {
    className += " wms-status-tag--with-icon";
  }

  return className;
});

/**
 * 关闭事件处理
 */
function handleClose(): void {
  emit("close");
}

/**
 * 点击事件处理
 */
function handleClick(event: MouseEvent): void {
  emit("click", event);
}
</script>

<style scoped lang="scss">
.wms-status-tag {
  display: inline-flex;
  align-items: center;
  font-weight: 500;

  &__icon {
    margin-right: 4px;
    font-size: 12px;
  }

  &__text {
    line-height: 1;
  }

  &--with-icon {
    padding-left: 6px;
    padding-right: 8px;
  }

  // 尺寸变体
  &.el-tag--large {
    .wms-status-tag__icon {
      font-size: 14px;
      margin-right: 6px;
    }
  }

  &.el-tag--small {
    .wms-status-tag__icon {
      font-size: 10px;
      margin-right: 2px;
    }
  }

  // 效果变体
  &.el-tag--dark {
    .wms-status-tag__icon {
      color: inherit;
    }
  }

  &.el-tag--light {
    .wms-status-tag__icon {
      opacity: 0.8;
    }
  }

  &.el-tag--plain {
    .wms-status-tag__icon {
      opacity: 0.9;
    }
  }
}

// Element Plus标签样式定制
:deep(.el-tag) {
  border-radius: var(--wms-border-radius-base);

  // 成功状态
  &.el-tag--success {
    --el-tag-bg-color: var(--wms-success-color-light);
    --el-tag-border-color: var(--wms-success-color-light);
    --el-tag-text-color: var(--wms-success-color-dark);
  }

  // 警告状态
  &.el-tag--warning {
    --el-tag-bg-color: var(--wms-warning-color-light);
    --el-tag-border-color: var(--wms-warning-color-light);
    --el-tag-text-color: var(--wms-warning-color-dark);
  }

  // 危险状态
  &.el-tag--danger {
    --el-tag-bg-color: var(--wms-error-color-light);
    --el-tag-border-color: var(--wms-error-color-light);
    --el-tag-text-color: var(--wms-error-color-dark);
  }

  // 信息状态
  &.el-tag--info {
    --el-tag-bg-color: var(--wms-info-color-light);
    --el-tag-border-color: var(--wms-info-color-light);
    --el-tag-text-color: var(--wms-info-color-dark);
  }

  // 主要状态
  &.el-tag--primary {
    --el-tag-bg-color: var(--wms-primary-color-light);
    --el-tag-border-color: var(--wms-primary-color-light);
    --el-tag-text-color: var(--wms-primary-color-dark);
  }
}
</style>
